<template>
  <div>
    <el-card>
      <div v-show="status==='noPaid'"><span>等待支付</span> <span class="grey">剩余 <span class="blue">13：11</span></span></div>
    </el-card>
    <el-card style="margin: 15px 0" body-style="padding:10px 20px">
     <el-row style="margin-bottom: 20px"><el-col :span="20">
      <h3>请尽快支付</h3>
      <span class="grey">快速送达</span></el-col>
      <el-col :span="4">
        <el-avatar shape="square" src="http://img5.imgtn.bdimg.com/it/u=1813981557,1511985548&fm=26&gp=0.jpg" ></el-avatar>
      </el-col></el-row>
      <el-button plain size="mini">联系客服</el-button><el-button plain size="mini">取消订单</el-button><el-button plain size="mini" type="danger" @click="jump('/successfulPay')">去支付</el-button>
    </el-card>
    <el-card body-style="padding:10px 20px">
      <h3 >店铺名称</h3>
      <hr >
      <el-row>
        <el-col :span="3"><el-avatar src="http://img5.imgtn.bdimg.com/it/u=1212579162,3510190995&fm=26&gp=0.jpg" shape="square"></el-avatar></el-col>
        <el-col :span="6" :offset="1"><span>商品名称</span></el-col>
        <el-col :span="6" :offset="1"><span>x2</span></el-col>
        <el-col :span="7" style="text-align: right"><span>￥12</span></el-col>
      </el-row>
      <el-row>
        <el-col :span="3"> <span style="color: white;background-color:#409EFF;font-size: 12px">配送费</span></el-col>
        <el-col :span="13" :offset="1"> 快速送达</el-col>
        <el-col :span="7" style="text-align: right"><span>￥3.5</span></el-col>
      </el-row>
      <div style="display: flex;justify-content: space-between;margin: 17px 0 7px">
        <span class="blue">联系商家</span> <span>￥15.5</span>
      </div>
    </el-card>
    <el-card body-style="padding:10px 20px" style="margin: 20px 0">
      <h3>配送信息</h3>
      <div style="display: flex;justify-content: space-between;margin: 10px 0">
        <span>送达时间</span><span class="grey">尽快送达</span>
      </div>
      <div style="display: flex;justify-content: space-between;margin: 10px 0">
        <span>收货地址</span><span class="grey">东湖社区</span>
      </div><div style="display: flex;justify-content: space-between;margin: 10px 0">
      <span>配送方式</span><span class="grey">快速送达</span>
    </div>

    </el-card>
    <el-card body-style="padding:10px 20px">
      <h3>订单信息</h3>
      <div style="display: flex;justify-content: space-between;margin: 10px 0">
        <span>订单号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="grey">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xx  xx   xx  xx</span><span class="grey">||</span><span class="blue">复制</span>
      </div>
      <div style="display: flex;justify-content: space-between;margin: 10px 0">
        <span>支付方式</span><span class="grey">在线支付</span>
      </div><div style="display: flex;justify-content: space-between;margin: 10px 0">
      <span>下单时间</span><span class="grey">2019-10-24 15:15:15</span>
    </div>

    </el-card>
  </div>
</template>

<script>
    export default {
        name: "OrderDetail",
        data(){
            return{
                status:'',
            }
        },
        methods:{
            getInformation(){
                this.status = this.$route.query.status;
            },
            jump(route){
                this.$router.replace(route);
            }
        },
        created() {
            this.getInformation();
        },

    }
</script>

<style scoped>
.grey{
  font-size: 12px;
  color: grey;
}
  .blue{
    font-size: 12px;
    color: #409EFF;
  }
h3{
   margin: 10px 0;
  }
</style>
